<template>
  <div class="search">
    <el-input
      v-model="search"
      placeholder="Please input"
      class="input-with-select"
    >
      <template #append>
        <el-button :icon="Search" />
      </template>
    </el-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const search = ref<string>('')

</script>

<style>
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}

.search {
  width: 100%;
  background-color: #04364A;
  padding: 16px;
  text-align: center;
}

.search .el-input {
  width: calc(80% - var(--sidebar-width));
}
</style>
